i<!--  -->
<template>
  <div v-if="generateBotObj.hasMenu&&!isPublishReport"
       style="width:30px;height:100%;position:absolute;top:0;right:36px;z-index:2019;background:#ffffff;display:flex;justify-content:center;align-items:center;"
       :style="{backgroundColor:botList.length>0?'#e8f7f6':''}">
    <el-dropdown @command="clickGenerateBotItem"
                 @visible-change="visibleChange"
                 size="small"
                 trigger="click">
      <span class="el-dropdown-link">
        <!-- <i title="Create Bot"
           class="cuifont icon_logo_bots"
           v-if="botList.length>0"
           style="cursor:pointer;width: 14px;height: 14px;font-size: 14px;"
           :style="{color:botList.length>0?'#17B3A3':''}"></i> -->
        <i title="Create Bot"
           class="cuifont icon_logo_bots"
           style="cursor:pointer;width: 14px;height: 14px;font-size: 14px;"></i>
      </span>
      <el-dropdown-menu slot="dropdown" style="width: 200px;">
        <el-dropdown-item v-for="(item,ii) in generateBotObj.menuList"
                          :key="ii"
                          :command='item.type'>{{ item.label }}</el-dropdown-item>
        <el-dropdown-item v-if="showLoading"
                          v-loading="loading"></el-dropdown-item>
        <el-dropdown-item v-for="(item,index) in botList"
                          :key="index"
                          :command='item.id'
                          :divided="item.divided">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="display: block;max-width: 180px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              <span>{{ item.name }}</span>
            </div>
            <div style="margin-left:20%;">
              <i v-if="$hasPermission('sys:bots:edit')"
                 class="cuifont icon_design"
                 style="cursor:pointer;"></i>
            </div>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- <SelectBotTemplate ref="addUpdateObj"
                       @showDataForm="jumpDataForm"></SelectBotTemplate> -->
    <AddUpdateBak ref="addUpdateBak"
                  :reselectVisible="reselectVisible"
                  :parentStateObj="botTem"
                  :botType="botType"
                  @closeQuery="closeQuery"></AddUpdateBak>
  </div>
</template>

<script>
import AddUpdateBak from '@/views/modules/mspbots/bots-bak/my-bots/add-or-update-bak'
// import SelectBotTemplate from '@/views/modules/mspbots/bots-bak/my-bots/select-bot-tempalte'
import { dashboardGadgetList } from '@/utils/data-json'

export default {
  components: { AddUpdateBak }, // SelectBotTemplate
  props: {
    gadgetId: {
      type: String,
      default: ''
    },
    gadgetType: {
      type: String,
      default: ''
    },
    slicer: {
      type: Object,
      default: () => { }
    },
    widgetName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      botList: [],
      loading: false,
      botTem: -1,
      botType: '',
      showLoading: true,
      reselectVisible: true
    }
  },
  computed: {
    isPublishReport () {
      return this.$route.path.includes('publicReport') || this.$route.path.includes('publicReportPdf')
    },
    generateBotObj () {
      try {
        return dashboardGadgetList.find(e => e.key === this.gadgetType).generateBot
      } catch (error) {
        return { hasMenu: false, menuList: [] }
      }
    }
  },
  methods: {
    visibleChange (e) {
      if (e) {
        this.initBotList()
      }
    },
    initBotList () {
      this.loading = true
      const params = {
        datasourceId: this.gadgetId
      }
      this.$interface.bots.getWidgetByBotsList(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (res.data) {
            let temp = []
            for (let i = 0; i < res.data.length; i++) {
              const element = res.data[i]
              if (i === 0) {
                element.divided = 'divided'
              }
              temp.push({
                id: element.id,
                name: element.name,
                divided: element.divided
              })
            }
            this.botList = res.data
            this.$forceUpdate()
          }
          this.$forceUpdate()
          this.showLoading = false
          this.loading = false
          if (!(this.botList.length > 0)) {
            this.clickGenerateBotItem('generateBot')
          }
        })
        .catch(() => { })
    },
    clickGenerateBotItem (type) {
      if (type) {
        if (type === 'generateBot') {
          this.$store.commit('DEFAULTWIDGET', this.gadgetId)
          this.addOrUpdateNewBots()
        } else {
          // this.$router.push({ name: 'mspbots-bots-bak-bot-design-index', query: { botId: type } })
          window.open(`${window.location.origin}/bot-${type}?botId=${type}&pageid=botdetail&design=design`, '_blank')
        }
      }
    },
    closeQuery () {
      this.$root.eventBus.$emit('close')
    },
    addOrUpdateNewBots () {
      // this.$nextTick(() => {
      //   this.$refs.addUpdateObj.init()
      // })
      this.$store.commit('BOTFORMEDIT', false)
      this.$store.commit('BOTFORMWIDGET', true)
      this.$nextTick(() => {
        this.$refs.addUpdateBak.init()
        this.$refs.addUpdateBak.dataForm.name = `Monitoring [${this.widgetName}] for`
        this.$refs.addUpdateBak.dataForm.description = `This bot is generated for monitoring [${this.widgetName}] for`
      })
      let item = { item: {
        id: '1351882044666384386',
        tenantCode: '1001',
        name: 'Quality Assurance Bot',
        icon: this.$ossLink + '/app/bot/bot-icon-normal.png',
        description: 'QA bot compare the data with predefined rules, send the alert to user via Microsoft Teams chat or Channel, if issue persists, alert the management to take actions.',
        enable: null,
        url: null,
        version: null,
        createTime: null,
        updateTime: null,
        triggerType: 'Timed',
        integration: null,
        integrationCode: null,
        integrationIcon: null,
        level: null,
        creator: null,
        updateBy: null,
        applyTenant: null,
        originalId: null,
        escalation: null,
        alert: null,
        params: null,
        flowSetting: null,
        shared: null,
        sysBotScriptList: null,
        businessType: null,
        status: null,
        publishTime: null,
        internal: null,
        teamId: null,
        teamName: null,
        creatorName: null,
        updateByName: null,
        classification: 'Quality Assurance Bot',
        da: null,
        po: null,
        jiraNumber: null,
        updated: null },
      type: 'template' }
      this.botTem = item.item
      this.botType = item.type
    }
  },
  reselectTemplateFn () {
    this.$nextTick(() => {
      this.$refs.addUpdateBak.visible = false
      this.$refs.addUpdateObj.visible = true
    })
  },
  jumpDataForm (item) {
    this.$nextTick(() => {
      this.$refs.addUpdateBak.init()
    })
    this.botTem = item.item
    this.botType = item.type
  }
}
</script>

<style scoped>
</style>
